import React from "react";
import { HashRouter, Route, Switch, BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";

import store from "../store";
// import Home from "./home";
import App from "../views/app";
import Home from "../views/home";
import Counter from "../views/counter.old";
import CounterNew from "../views/counter.new";
import TestRedux from "../views/testRedux";
import Demo from "../views/demo";
import Demo2 from "../views/demo2";
import TestProviderConsumer from "../views/test.provider.consumer";
import TestUseContext from "../views/testUseContext";

// TODO: 为什么这里的Provider不用context？
const BasicRoute = () => (
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={App} />
          <Route path="/home" exact component={Home}></Route>
          <Route path="/app" component={App}></Route>
          <Route path="/counter.old" component={Counter}></Route>
          <Route path="/counter.new" component={CounterNew}></Route>
          <Route path="/testRedux" component={TestRedux}></Route>
          <Route path="/demo" component={Demo}></Route>
          <Route path="/demo2" component={Demo2}></Route>
          <Route
            path="/test.provider.consumer"
            component={TestProviderConsumer}
          ></Route>
          <Route path="/TestUseContext" component={TestUseContext}></Route>
        </Switch>
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

export default BasicRoute;
